<template>
	<view class="container">
		<view class="tabsBox">
			<waves :class="['tabsItem', tabCurrent === index ? 'tabActiv' : '']" v-for="item, index in tabs"
				:key="'tab' + index" @onTap="tabCurrent = index">
				{{ item }}
				<view class="mark" v-if="tabCurrent === index"></view>
			</waves>
		</view>
		<view class="tableBox">
			<template v-if="tabCurrent === 0">
				<myTable v-model="page" :headers="headers" :tableData="tableData" @change="changeReceive"
					:total="total">
					<template :slot="`time${index}`"
						v-for="(item, index) in tableData">{{ timeFormat(item.betTime, 'hh:MM yyyy/mm/dd')  }}</template>
				</myTable>
			</template>
			<!-- <template v-if="tabCurrent === 1">
				<myTable :headers="headers2" :tableData="tableData2" @change="changeReceive2" :total="total2"></myTable>
			</template> -->
		</view>
	</view>
</template>

<script>
	import {
		sendMessage
	} from '@/api/websocket.js'
	import {
		timeFormat
	} from '@/utils/function/index.js'
	export default {
		data() {
			return {
				timeFormat,
				tabCurrent: 0,
				tabs: [this.$t('Page.home.ystz'),
					// 'Provider Bet'
				],
				total: 0,
				page: 0,
				// total2: 0,
				headers: {
					gameName: this.$t('Page.home.yx'),
					betTime: this.$t('Page.home.sj'),
					validAmount: this.$t('Page.home.tzje'),
					settledAmount: this.$t('Page.home.zf'),
				},
				tableData: [],
				headers2: {
					gameName: this.$t('Page.home.yx'),
					betTime: this.$t('Page.home.sj'),
					validAmount: this.$t('Page.home.tzje'),
					settledAmount: this.$t('Page.home.zf'),
				},
				tableData2: []
			}
		},
		created() {
			this.pageInit()
		},
		methods: {
			pageInit() {
				this.callGamelog()
			},
			changeReceive(e) {
				this.callGamelog()
			},
			callGamelog() {
				const {
					GAMELOG
				} = this.$api
				sendMessage({
					flag: GAMELOG,
					content: {
						page: this.page,
						dealstatus: -1
					}
				})
				uni.$once(GAMELOG, (res) => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.total = data.count
						this.tableData = data.list
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100%;

		.tabsBox {
			display: flex;

			.tabsItem {
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 700;
				padding: 0 16px;
				font-size: 16px;
				color: #adadc2;
				position: relative;
			}

			.tabActiv {
				color: #FFF;

				.mark {
					background-color: #fff;
					margin: 0 30%;
					height: 4px;
					border-radius: 2px;
					position: absolute;
					right: 0;
					bottom: 0;
					left: 0;
				}
			}
		}

		.tableBox {
			padding: 16px 0;
			margin-top: 16px;
		}
	}
</style>